<style type="text/css">
input[type="text"], textarea{
    padding: 5px;
    margin: 3px;
}
textarea{
    resize: none;
}
#btn_info_adicional{
    margin: 20px;
}
.tabs{
    display: none;
}
#tab-1{
    display: block;
}
.btn_continuar{
    padding: 10px 25px;
    float: right;
    margin-right: 20px;
}
.parrafo_ayuda{
    text-align: justify;
    margin: 10px;
    border: 1px solid black;
    background-color: #F9EDBE;
    border: 1px solid #F0C36D;
    padding: 20px;
    display: none;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
    $("input, textarea").focus(function(){
        $(".parrafo_ayuda").hide();
        var id = $(this).attr("id");
        if(id=="nombreSitioWeb"){
            $("#pNombreSitioWeb").fadeIn();
        }else if(id=="nombreDominio"){
            $("#pNombreDominio").fadeIn();
        }else if(id=="breveDescripcion"){
            $("#pBreveDescripcion").fadeIn();
        }else if(id=="telefonos"){
            $("#pTelefonos").fadeIn();
        }else if(id=="direccion"){
            $("#pDireccion").fadeIn();
        }else if(id=="correoElectronico"){
            $("#pCorreoElectronico").fadeIn();
        }
    });
    $("input, textarea").blur(function(){
        if($("#nombreDominio").val()!=""){
            $("label.error").hide();
            $("input.error").removeClass('error');
            $("#nombreDominio").val().focus();
        }
        if($("#nombreDominio").val()!=""){
            $(".btn_continuar").removeAttr('disabled');
            $(".btn_continuar").removeClass('disabled');
            $(".btn_continuar").addClass('enabled');
        }
    });
    $(".btn_continuar").click(function(){
        if($("#tab-1").is(":visible")){
            if($("#nombreDominio").val()!=""){
                mostrar_tab(2);
            }
        }else if($("#tab-2").is(":visible")){
            mostrar_tab(3);
        }else if($("#tab-3").is(":visible")){
            $("#frmPasoTres").submit();
        }
        
        if($("#nombreDominio").val()==""){
            if(!$("#tab-1").is(":visible")){
                mostrar_tab(1);
            }
            $("#nombreDominio").focus();
            $("#errNombreDominio").show();
            $("#nombreDominio").addClass('error');
        }
    });
});
/*
function mostrar_info_adicional(){
    $("#btn_info_adicional").hide();
    $("#info_adicional").fadeIn();
}
*/
function mostrar_tab(nroTab){
    $(".tabs").hide();
    if(nroTab==1){
        $("#tab-1").fadeIn();
    }else if(nroTab==2){
        $("#tab-2").fadeIn();
    }else if(nroTab==3){
        $("#tab-3").fadeIn();
    }
}
</script>
<!-- Main -->
<section id="main" class="container">
    <header>
        <h2>Asistente de creación de sitio web</h2>
        <p>Estás a sólo 2 pasos de tener tu idea en Internet</p>
    </header>
    <div class="row">
        <div class="12u">
            <!-- Form -->
            <section class="box">
                <h3>Paso 3 de 4</h3>
                <p>Describe la información que estará en tu sitio web.</p>
                <form method="post" action="#">
                    
                </form>
            </section>
        </div>
    </div>

    
    <div class="row">
        <div class="12u">
            <!-- Form -->
            <section class="box">
                <h3>Form</h3>
                <form method="post" action="#">
                        <div class="row uniform half ollapse-at-2">
                                <div class="6u">
                                        <input type="text" name="name" id="name" value="" placeholder="Name">
                                </div>
                                <div class="6u">
                                        <input type="email" name="email" id="email" value="" placeholder="Email">
                                </div>
                        </div>
                        <div class="row uniform half">
                                <div class="12u">
                                        <div class="select-wrapper">
                                                <select name="category" id="category">
                                                        <option value="">- Category -</option>
                                                        <option value="1">Manufacturing</option>
                                                        <option value="1">Shipping</option>
                                                        <option value="1">Administration</option>
                                                        <option value="1">Human Resources</option>
                                                </select>
                                        </div>
                                </div>
                        </div>
                        <div class="row uniform half collapse-at-2">
                                <div class="4u">
                                        <input type="radio" id="priority-low" name="priority" checked="">
                                        <label for="priority-low">Low Priority</label>
                                </div>
                                <div class="4u">
                                        <input type="radio" id="priority-normal" name="priority">
                                        <label for="priority-normal">Normal Priority</label>
                                </div>
                                <div class="4u">
                                        <input type="radio" id="priority-high" name="priority">
                                        <label for="priority-high">High Priority</label>
                                </div>
                        </div>
                        <div class="row uniform half">
                                <div class="6u">
                                        <input type="checkbox" id="copy" name="copy">
                                        <label for="copy">Email me a copy of this message</label>
                                </div>
                                <div class="6u">
                                        <input type="checkbox" id="human" name="human" checked="">
                                        <label for="human">I am a human and not a robot</label>
                                </div>
                        </div>
                        <div class="row uniform half">
                                <div class="12u">
                                        <textarea name="message" id="message" placeholder="Enter your message" rows="6"></textarea>
                                </div>
                        </div>
                        <div class="row uniform">
                                <div class="12u">
                                        <ul class="actions">
                                                <li><input type="submit" value="Send Message"></li>
                                                <li><input type="reset" value="Reset" class="alt"></li>
                                        </ul>
                                </div>
                        </div>
                </form>

                <hr>

                <form method="post" action="#">
                    <div class="row uniform half collapse-at-2">
                        <div class="9u">
                            <input type="text" name="query" id="query" value="" placeholder="Query">
                        </div>
                        <div class="3u">
                            <input type="submit" value="Search" class="fit">
                        </div>
                    </div>
                </form>
            </section>
        </div>
    </div>
</section>












<h1>Estás a sólo 1 paso de tener tu idea en Internet!</h1>
<h2>Paso 3 de 4.</h2>
<br />
<h3>Describenos los contenidos de tu sitio web</h3>
<br /><br />
<form action="<?php echo url_for('@construccionPasoTresGrabar'); ?>" method="post" id="frmPasoTres" autocomplete="off">
    <table>
        <tr>
            <td><a href="javascript:void(0);" onclick="mostrar_tab('1')" style="padding: 5px 10px; border: 1px solid black;">Datos Generales</a></td>
            <td><a href="javascript:void(0);" onclick="mostrar_tab('2')" style="padding: 5px 10px; border: 1px solid black;">Páginas</a></td>
            <td><a href="javascript:void(0);" onclick="mostrar_tab('3')" style="padding: 5px 10px; border: 1px solid black;">Datos de Contacto</a></td>
        </tr>
    </table>
    <fieldset class="tabs" id="tab-1">
        <legend>Datos Generales</legend>
        <table width="100%">
            <tr>
                <td width="200px">Nombre del sitio web</td>
                <td>
                    <input type="text" id="nombreSitioWeb" size="50" placeholder="Mi empresa SAC" />
                </td>
                <td width="740px" rowspan="5" valign="top">
                    <p class="parrafo_ayuda" id="pNombreSitioWeb">
                        <?php if($tipoSitioWeb=="personal"){ ?>
                            El <b>nombre de tu sitio web</b> definirá sus contenidos.<br /><br />
                            - Por ejemplo: Puedes poner tu nombre.<br />
                        <?php }elseif($tipoSitioWeb=="empresarial"){ ?>
                            El <b>nombre de tu sitio web</b> definirá sus contenidos.<br /><br />
                            - Es recomendable colocar su razón social o nombre de marca.<br />
                        <?php } ?>
                    </p>
                    <p class="parrafo_ayuda" id="pNombreDominio">
                        El <b>nombre de dominio</b> es muy importante, es el nombre con el que será conocido tu sitio web en Internet, es esencial elegir un buen nombre acorde a la imagen de tu empresa.
                        <br /><br />
                        Por ejemplo: www.lacasadebabi.com, www.lacasadebabi.pe, www.lacasadebabiperu.com
                        <br /><br />
                        * El nombre de dominio es un dato obligatorio para registrar tu sitio web.
                    </p>
                    <p class="parrafo_ayuda" id="pBreveDescripcion">
                        Una <b>breve descripción</b> de tu sitio web.
                    </p>
                </td>
            </tr>
            <tr>
                <td>Nombre de dominio *</td>
                <td>
                    <input type="text" id="nombreDominio" size="50" placeholder="www.miempresa.com" />
                    <br />
                    <label id="errNombreDominio" class="error" style="display: none;">Debes especificar un nombre de dominio</label>
                    <em style="color: gray;">* Sujeto a disponibilidad.</em>
                    <br /><br />
                </td>
            </tr>
            <tr>
                <td>Logo</td>
                <td>
                    <?php echo image_tag('logo.jpg','size=340x120'); ?>
                    <br />
                    <input type="file" />
                </td>
            </tr>
            <tr>
                <td>Breve descripción</td>
                <td>
                    <textarea id="breveDescripcion" rows="5" cols="50"></textarea>
                </td>
            </tr>
        </table>
        <?php if($tipoSitioWeb=="empresarial"){ ?>
        <a href="javascript:void(0)" id="btn_info_adicional" onclick="mostrar_info_adicional();">Ingresar información adicional</a>
        <br /><br />
        <div id="info_adicional" style="display: none; margin: 20px;">
            <h3>Información Adicional</h3>
            <table width="100%">
                <tr>
                    <td width="200px">Colores del sitio</td>
                    <td>
                        <a href="#">Selector de Colores</a>
                    </td>
                </tr>
                <tr>
                    <td>Visión</td>
                    <td>
                        <textarea rows="5" cols="50"></textarea>
                    </td>
                </tr>
                <tr>
                    <td>Misión</td>
                    <td>
                        <textarea rows="5" cols="50"></textarea>
                    </td>
                </tr>
            </table>
        </div>
        <?php } ?>
    </fieldset>
    <fieldset class="tabs" id="tab-2">
        <legend>Páginas</legend>
        <table width="100%">
            <tr>
                <td width="100px" valign="top">
                    <ul id="construccion_paso_3_paginas">
                        <li><a href="javascript:void(0);">Inicio</a></li>
                        <li><a href="javascript:void(0);">Quienes Somos</a></li>
                        <li><a href="javascript:void(0);">Servicios</a></li>
                    </ul>
                </td>
                <td valign="top">
                    <div id="contenido_inicio">
                        <table width="100%">
                            <tr>
                                <td>
                                    <p class="parrafo_ayuda">
                                        Se mostrará un texto de ayuda, según el recuadro que se esté llenando.
                                    </p>
                                </td>
                            </tr>
                            <tr>
                                <td><strong>Inicio</strong></td>
                            </tr>
                            <tr>
                                <td><textarea style="width: 1000px; height: 150px;"></textarea></td>
                            </tr>
                            <tr>
                                <td>
                                    <strong>Imagenes</strong><br />
                                    <input type="file" /><br />
                                    <input type="file" /><br />
                                    <input type="file" /><br />
                                    <input type="file" /><br />
                                </td>
                            </tr>
                        </table>
                    </div>
                    <div id="contenido_quienes_somos"></div>
                    <div id="contenido_servicios"></div>
                </td>
            </tr>
        </table>
    </fieldset>
    <fieldset class="tabs" id="tab-3">
        <legend>Datos de Contacto</legend>
        <table width="100%">
            <tr>
                <td width="200px">Teléfonos</td>
                <td>
                    <input type="text" id="telefonos" size="50" placeholder="(+511) 987-321-654" />
                </td>
                <td width="740px" rowspan="3" valign="top">
                    <p class="parrafo_ayuda" id="pTelefonos">
                        Los teléfonos a los que puedan comunicarse contigo.
                    </p>
                    <p class="parrafo_ayuda" id="pDireccion">
                        Ingresa la dirección fiscal de tu empresa.
                    </p>
                    <p class="parrafo_ayuda" id="pCorreoElectronico">
                        Ingresa un correo elctrónico donde tus clientes puedan escribirte.
                    </p>
                </td>
            </tr>
            <tr>
                <td width="200px">Dirección</td>
                <td>
                    <input type="text" id="direccion" size="50" placeholder="Av. Perú 159 - Lima" />
                </td>
            </tr>
            <tr>
                <td width="200px">Correo Electrónico</td>
                <td>
                    <input type="text" id="correoElectronico" size="50" placeholder="minombre@miempresa.com" />
                </td>
            </tr>
            <!-- Punto en el mapa -->
        </table>
    </fieldset>
    <br />
    <input type="button" value="Continuar" class="btn_general btn_continuar disabled" style="cursor: pointer;" />
    <div class="clear"></div>
    <em style="color: gray;">* Los datos ingresados son preliminares, los podrás modificar cuando quieras.</em>
    <br /><br />
</form>